<html lang="cn">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
    <meta name="keywords" content="客服系统"/>
    <title>在线客服系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/index.min.css">
    <script src="https://cdn.staticfile.net/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.staticfile.net/element-ui/2.15.14/index.js"></script>
    <script src="https://cdn.staticfile.net/jquery/3.6.0/jquery.min.js"></script>


    <script src="/static/js/functions.js?v=fgffdwersdccvcbv"></script>
    <script src="/static/js/reconnecting-websocket.min.js"></script>
    <link rel="stylesheet" href="/static/css/common.css?v=sdsderfrgfgdfdf"/>
    <link rel="stylesheet" href="/static/css/icono.min.css"/>
    <link rel="stylesheet" href="/static/css/icon/iconfont.css?v=fgjlgfda"/>
</head>
<body class="visitorBody">
<div id="app" class="chatCenter">
    <template>
        <!--客服代码-->
        <div class="chatEntTitle" v-show="!isIframe">
            <el-badge type="success" is-dot class="item">
                <el-avatar class="chatEntTitleLogo" :size="35" :src="kefuInfo.avatar"></el-avatar>
            </el-badge>
            <div>
                <!--客服 -->
                <div><{kefuInfo.nickname}></div>
            </div>
        </div>
        <div class="chatEntBox">
            <!-- 聊天记录窗口-->
            <div class="chatContext chatVisitorPage">
                <div class="floating-window">
                    <div class="chatNotice" v-on:click="getHistoryMessage" v-show="showLoadMore">
                        <a href="javascript:;" class="chatNoticeContent"
                           style="color: #07a9fe;"><{flyLang.moremessage}></a>
                    </div>
                    <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==false}">
                        <div class="chatTime" v-bind:class="{'chatTimeHide': v.show_time==false}">
                            <span><{v.time}></span></div>
                        <div v-if="v.is_kefu" style="display: flex;">
                            <el-avatar style="margin-right:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>
                            <div class="chatMsgContent">
                                <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
                            </div>
                        </div>
                        <div class="kefuMe" v-if="!v.is_kefu" style="display: flex;justify-content: flex-end;">
                            <div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
                            <!--                                <el-avatar style="margin-left:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>-->
                        </div>
                        <div class="clear"></div>
                    </el-row>
                </div>
            </div>
            <!-- 发送消息窗口-->
            <div class="chatBoxSend">
                <div class="visitorIconBox">
                    <el-tooltip :content="flyLang.sentFace" placement="top">
                        <div class="iconBtn iconfont icon-xiaolian"
                             style="margin-left:0.8rem;font-size:1.5rem;cursor: pointer;"
                             @click.stop="showFaceIcon==true?showFaceIcon=false:showFaceIcon=true"></div>
                    </el-tooltip>

                    <el-tooltip :content="flyLang.UpPic" placement="top">
                        <div class="iconBtn el-icon-picture" id="uploadImg" v-on:click="uploadImg('/uploadimg')"
                             style="font-size: 1.5rem;"></div>
                    </el-tooltip>
                    <el-tooltip :content="flyLang.UpAch" placement="top">
                        <div class="iconBtn el-icon-upload" id="uploadFile" v-on:click="uploadFile('/uploadfile')"
                             style="font-size: 1.5rem;"></div>
                    </el-tooltip>

                    <div style="display: none" :title="flyLang.emotions"
                         class="icono-smile visitorIconBtns visitorFaceBtn"></div>

                    <div class="clear"></div>
                </div>
                <!--表情-->
                <div class="faceBox visitorFaceBox" v-show="showFaceIcon">
                    <ul class="faceBoxList">
                        <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face" :title="v.name"><img
                                :src=v.path></li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <!--输入框 -->
                <el-input show-word-limit maxlength="100" :rows="3" type="textarea" resize="none"
                          class="visitorEditorArea" @focus="scrollBottom;showIconBtns=false"
                          @blur="scrollBottom;showIconBtns=false" v-model="messageContent"
                          v-on:keyup.enter.native="chatToUser">
                </el-input>
                <!--                <el-button type="primary" size="mini" class="visitorEditorBtn"-->
                <!--                           v-on:click="chatToUser();showIconBtns=false">-->
                <!--                    <{flyLang.sent}>-->
                <!--                </el-button>-->
            </div>
        </div>
        <div class="chatArticle">
            <h3 class="hotQuestionTitle">公告通知
            </h3>
            <div class="allNotice" v-html><{kefuInfo.allNotice}></div>
        </div>
        <!--//客服代码-->
        <audio id="chatMessageAudio">
        </audio>
        <audio id="chatMessageSendAudio">
        </audio>
    </template>
</div>
</body>
<script src="/static/js/chat-lang.js?v=0.3.7"></script>
<script>
    let KEFU_ID = '{{.KEFU_ID}}';
    let REFER = '{{.Refer}}';
    let VISITOR_EMAIL = '{{.email}}';
    let VISITOR_FIRST_NAME = '{{.firstName}}';
    let VISITOR_LAST_NAME = '{{.lastName}}';
    const LANG = checkLang();
</script>

<script>
    //设置html下的根font-size，用于px转rem
    function getFontSize() {
        const baseFontSize = 16;
        const baseWidth = 390;
        const minWidth = 320;
        const clientWidth = window.innerWidth;
        const clientHeight = window.innerHeight;
        console.log("clientWidth:",clientWidth)
        console.log("clientHeight:",clientHeight)
        const innerWidth = Math.max(Math.min(clientWidth, baseWidth), minWidth);
        let rem = clientWidth / (baseWidth / baseFontSize);
        if (clientWidth > baseWidth) {
            rem = 16
        }
        if (clientWidth < minWidth) {
            rem = minWidth / (baseWidth / baseFontSize);
        }
        document.querySelector('html').style.fontSize = rem + 'px';
    }
    (function(doc, win) {
        getFontSize();
        window.onresize = function() {
            getFontSize();
            console.log("kefu font-size:",document.querySelector('html').style.fontSize)
        }
    })(document, window);
</script>
<script src="/static/js/chat-page.js?v=rtyrhgfnykug"></script>
</html>
